/**
 * Created by Administrator on 2017/3/21.
 */
import React, { Component, Fragment } from 'react';
import { Form, Button, Badge, Select, Switch, DatePicker, Descriptions, Tag, Modal } from 'antd';
import {connect} from 'dva';
import ReactDataGrid from 'react-data-grid';
const { confirm } = Modal;
const ButtonGroup = Button.Group;
class AddPoliciesForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showCustom: false,
    };
  }

  componentDidMount() {
  }
  render() {
    const defaultColumnProperties = {
      resizable: true,
    };
    const data=[{
      id:1,
      name:"DN50",
      size:'小表',
      temp:'冷水表',
      output:'无线',
    },{
      id:2,
      name:"DN150",
      size:'小表',
      temp:'冷水表',
      output:'无线',
    },{
      id:3,
      name:"DN250",
      size:'小表',
      temp:'冷水表',
      output:'无线',
    },{
      id:4,
      name:"DN350",
      size:'小表',
      temp:'冷水表',
      output:'无线',
    }]
    const columns = [
      {
        name: '序号',
        width: 50,
        key: 'id',
      },
      {
        name: '名称',
        width: 100,
        key: 'name',
      },
      {
        name: '尺寸类型',
        width: 100,
        key: 'size',
      },
      {
        name: '温度介质类型',
        width: 100,
        key: 'temp',
      },
      {
        name: '输出类型',
        key: 'output',
        width: 100,
      },
      {
        name: '操作',
        width: 200,
        key: 'right',
        classname:'operate',
        formatter: (event) => <Fragment>
          {
            true &&
            <Button
              type="primary"
              size="small"
              icon="edit"
              onClick={(e) => {
                event.stopPropagation();
                return
                this.setState({
                  editRecord: event.row,
                  editModal: true,
                });
              }
              }
            >编辑
            </Button>
          }
          {
            true &&
            <Button
              type="danger"
              size="small"
              icon="delete"
              onClick={(e) => {
                e.stopPropagation();
                confirm({
                  title: `确定要删除"${event.row.name}"吗?`,
                  content: '请谨慎操作！',
                  okText: '确定',
                  okType: 'danger',
                  cancelText: '取消',
                  centered:true,
                  maskClosable: true,
                  onOk() {
                    return
                    that.handleDelete(event.row.id);
                  },
                  onCancel() {
                    console.log('Cancel');
                  },
                });
              }
              }
            >删除
            </Button>
          }
        </Fragment>,
      },
    ].map(c => ({  ...defaultColumnProperties,...c }));
    return (
      <div>
        <div>
          <Button type="primary" block style={{marginBottom:'10px'}}>
            添加水表类型
          </Button>
          <ReactDataGrid
            columns={columns}
            rowGetter={i => data[i]}
            rowsCount={data.length}
            minHeight={(data.length+1)*35}

          />
        </div>
      </div>
    );
  }
}

const AddPoliciesFormWrap = Form.create()(AddPoliciesForm);
export default connect()(AddPoliciesFormWrap);


